<template>
  <div>
    <el-form-item label="上传视频：">
      <el-upload
        drag
        :before-upload="handleBeforeMp4Upload"
        action="https://jsonplaceholder.typicode.com/posts/">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div v-if="$store.state.ossUploading.length >0||$store.state.ossUpload.length">
        <div v-for="(item,index) in $store.state.ossUploading">
          <label>{{item.name}}</label>
          <br>
          <el-progress :percentage="item.percent" :stroke-width="20" text-inside style="width: 50%"/>
        </div>
        <div v-for="(item,index) in $store.state.ossUpload">
          <label>{{item.name}}</label>
          <br>
          <div style="display:flex;">
            <el-progress :percentage="item.percent" :stroke-width="20" text-inside style="width: 50%"/>
            <el-button type="danger" size="mini" style="margin-left: 15px" @click.native="handleRemove(item,index)">删除
            </el-button>
          </div>
        </div>
        <el-button style="margin-top: 10px" type="primary" @click="upload" v-if="$store.state.uploadShow"
                   :loading="$store.state.uploadStatus">
          {{ $store.state.uploadStatus ? '正在上传': '点击上传' }}
        </el-button>
      </div>
    </el-form-item>
  </div>
</template>

<script>
  import {formatDate, ossPut, isBlank, ossVideoUpload, emptyVideoUpload} from '@/utils/util'

  export default {
    props: ['videoUrl'],
    watch: {
      videoUrl: function (newValue) {
      }
    },
    data() {
      return {
        pageNo: 1,
        pageTotal: 0,
        userId: this.$store.state.user.userId,
        imgName: '',
        videoCover: '',
        visible: false,
        dataList: [],
        columns1: [],
      }
    },
    methods: {
      handleBeforeMp4Upload(file) {
        var ossObjct = {};
        ossObjct.name = file.name
        ossObjct.fileName = file.name;
        ossObjct.percent = 0
        ossObjct.status = false
        ossObjct.file = file;
        this.$store.state.ossUpload.splice(0, 1, ossObjct)
        this.$store.state.uploadShow = true
        return false
      },
      upload() {
        this.$store.state.uploadPath = this.videoUrl;
        ossVideoUpload();
        this.$store.state.uploadStatus = true
        this.$store.state.uploadShow = true
        var that = this
        setTimeout(function () {
          that.$emit("getCover", that.$store.state.requestUrls)
        }, 1000)
      },
      handleView(name) {
        this.imgName = name
        this.visible = true
      },
      handleRemove(item, index) {
        this.$store.state.ossUpload.splice(index, 1)
      },
      clickQuery() {
      },
      changeSel() {
      },
      change(page) {
        this.pageNo = page
      },
    },
    mounted() {
      emptyVideoUpload()
    }
  }
</script>
<style>
</style>
